<template>
    <div>
        <p>函数式组件</p>
        <Functional :name="`hello ${name}`" @click="log">click here</Functional>

        <temp-val :var1="`do ${name}`">
            <template v-slot='{var1}'>
                {{var1}}
            </template>
        </temp-val>

        <Functional2 @click="log()">click me</Functional2>

        <Functional3 class='footerBtn'>
            <template v-slot:foo>
                first
            </template>
            <p>second</p>
        </Functional3>
    </div>
</template>

<script>
import Functional from './Functional'
import Functional2 from './Functional2.js'
import Functional3 from './Functional3.js'
import TempVal from './TempVar'

export default {
    components: {
        Functional,
        TempVal,
        Functional2,
        Functional3
    },
    data() {
        return {
            name: 'vue'
        }
    },
    methods: {
        log() {
            console.log('good day!')
        }
    }
}
</script>